@import "../../assets/style/_var.less";
page {
  padding-bottom: 60rpx;
}
.banner {
  margin: 8rpx 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
  .item {
    height: 266rpx;
  }
  .img {
    width: 100%;
    height: 100%;
  }
}
.section {
  margin: 44rpx 32rpx 0;
  & > .title {
    font-size: @font-size-heavy;
    font-weight: 500;
    margin-bottom: 24rpx;
    &::before {
      content: "";
      display: block;
      width: 10rpx;
      height: @font-size-heavy;
      background: @color-theme;
      border-radius: 4rpx;
      margin-right: 16rpx;
    }
  }
}
.recommend {
  margin-top: 20rpx;
}
.order {
  @img-size: 240rpx;
  @name-height: 40rpx;
  .body {
    overflow: auto;
  }
  .item {
    &:not(:last-child) {
      margin-right: 24rpx;
    }
    .box {
      position: relative;
      width: @img-size;
      overflow: hidden;
      margin-bottom: 12rpx;
      border-radius: 20rpx;
    }
    .play-num {
      position: absolute;
      top: 8rpx;
      left: 50%;
      transform: translateX(-50%);
      word-break: keep-all;
      white-space: nowrap;
      background: rgba(@color-theme, 0.6);
      font-size: 24rpx;
      height: 36rpx;
      padding: 0 18rpx;
      border-radius: 20rpx;
    }
    .name {
      line-height: @name-height;
      height: @name-height;
      width: @img-size;
      text-align: center;
      margin-top: 4rpx;
    }
  }
}
.everyone {
  .item {
  }
}
